<script lang="ts" setup>

import { onMounted, reactive, watch } from 'vue'

const emit = defineEmits(['update:modelValue', 'close', 'change'])
const props = defineProps({
  select: {
    type: Boolean,
    default: false
  },
  auto: {
    type: Boolean,
    default: false
  }
})
const state = reactive({
  init: false
})

const initView = (val = false) => {
  if (val)state.init = true
}

watch(() => props.select, (val:any) => {
  initView(val)
})

onMounted(() => {
  initView(props.select)
})

</script>

<template>
  <div v-show="select" :class="['nav-content-box',auto?'nav-content-box-auto':'']">
    <template v-if="state.init">
      <slot />
    </template>
  </div>
</template>

<style scoped lang="scss">
 .nav-content-box{
   width:100%;
   height:100%;
   position:relative;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: auto;
 }
 .nav-content-box-auto{
   height: auto;
   overflow-y: hidden;
 }
</style>
